<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-form-item label="中流程" :prop="checked ? '' : 'medium'">
        <el-select clearable  v-model="checked ? tempMedium : form.medium" placeholder="请选择" :disabled="checked"
          :placeholder="checked ? '请选择子流程' : '请选择中流程'">
          <el-option v-for="item in mediumOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-checkbox v-model="checked" @change="checkBoxChange">自定义</el-checkbox>
      <div>
        <el-form-item label="" :prop="checked ? 'medium' : ''">
          <el-select clearable  v-model="form.medium" placeholder="请选择" :disabled="!checked">
            <el-option v-for="item in selfOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-if="form.medium == 5">
          <el-form-item label="" prop="children">
            <el-select clearable  v-model="form.children" placeholder="请选择">
              <el-option v-for="item in childrenOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        medium: '',
        children: ''
      },
      tempMedium: null,
      checked: false,
      mediumOptions: [{
        value: '1',
        label: '华为'
      }, {
        value: '2',
        label: '小米'
      }, {
        value: '3',
        label: '苹果'
      }],
      selfOptions: [{
        value: '4',
        label: '没有子流程'
      }, {
        value: '5',
        label: '有子流程'
      }],
      childrenOptions: [{
        value: '6',
        label: '子流程1号'
      },
      {
        value: '7',
        label: '子流程2号'
      }

      ],
      rules: {
        medium: [{ required: true, message: '请设置活动规则', trigger: 'blur' },],
        children: [{ required: true, message: '请选择子流程', trigger: 'blur' },]
      }
    }
  },
  methods: {
    checkBoxChange(e) {
      this.form.medium = ''
      this.form.children = ''
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        //表单验证失败
        if (!valid) {
          //提示语
          this.$message("未设置活动规则");
          return false;
        }
        else {
          this.$message("成功");
          console.log(this.form)
        }
        //这里可以写表单验证通过之后执行的代码
        //.......
      });
    }
  }

}
</script>

<style scoped lang="scss"></style>